{% extends "layout.html" %}
{%block stylesheets%}
{{super()}}
{{css("items/index")}}
{%endblock%}
{%block javascript%}
{{super()}}
{{js("items/carousel")}}
{%endblock%}
{% block content %}
{%macro product(itm) %}
<a class="product" href="{{itm|url}}">
	<div class="thumbnail" style="background-image:url('{{itm|url(named=False,action='picture')}}')"></div>
	<div class="label">
		<span class="name">{{itm.name}}</span>
		<span class="price">{{itm.price|price}}</span>
	</div>
</a>
<div class="product-spacer"></div>
{%endmacro%}
{%macro product_carousel(title,lst) %}
<div class="carousel-container">
	<h1>{{title}}</h1>
	<div class="carousel">
		<div class="carousel-contents">
			{%for itm in lst%}
			{{product(itm)}}
			{%endfor%}
		</div>
	</div>
	<div class="left-arrow"></div>
	<div class="right-arrow"></div>
	<div class="spacer"></div>
</div>
{%endmacro%}
{{product_carousel('Recently Added',recently_added)}}
{{product_carousel('About to Expire',about_to_expire)}}
<a href="http://www.w3.org/html/logo/" class="html5">
<img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-graphics-performance-semantics.png" width="115" height="32" alt="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, Performance &amp; Integration, and Semantics" title="HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, Performance &amp; Integration, and Semantics">
</a>
{%endblock%}